<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {ref,onMounted} from 'vue'
let firstThree = ref()
const scene = new THREE.Scene()

const geometry = new THREE.BoxGeometry(100,400,100)

const geometry1 = new THREE.BoxGeometry(100,150,100)

const texture1 = new THREE.TextureLoader().load( "/public/timg.jpg" );
texture1.wrapS = THREE.RepeatWrapping;
texture1.wrapT = THREE.RepeatWrapping;


const metaerial = new THREE.MeshBasicMaterial({
  side:THREE.DoubleSide,
  color:0x00faff
})
const group = new THREE.Group();
group.name = "楼房"
scene.add(group)
for (let index = 0; index < 6; index++) {
  const metaerial = new THREE.MeshBasicMaterial({
    side:THREE.DoubleSide,
    color:0x00faff
  })
  const mesh = new THREE.Mesh(geometry, metaerial); 
  mesh.position.x = index*150
  mesh.name = "楼房-高-"+index
  group.add(mesh)
}
for (let index = 0; index < 6; index++) {
  const mesh1 = new THREE.Mesh(geometry1, metaerial); 
  mesh1.position.set(index*150,0,150)
  mesh1.name = "楼房-低-"+index
  group.add(mesh1)
}

let m = group.getObjectByName("楼房-高-3")
m.material.color.set('red')
console.log(m);


const ambient = new THREE.AmbientLight("#fff",0.9)
scene.add(ambient)

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(100,100,200)
camera.lookAt(0,0,0) 

let helper = new THREE.AxesHelper(200,200,200)
scene.add(helper)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height)
renderer.render(scene,camera)

const controls = new OrbitControls(camera,renderer.domElement)
controls.addEventListener("change",function(){
  // 重新渲染，必须有这步操作，否则数据改变，但无法看到
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div id="firstThree" ref="firstThree"></div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
